<template>
  <!-- 分享 -->
  <div class="window">
    <div style="position: absolute;right:60px;top:6vh;">
      <i @click="gotoPath" style="cursor: pointer;color: #999DB1;font-size:22px;"  class="el-icon-monitor"></i>
    </div>
    <!-- 舆情标题，内容 ，上报人，联系方式，但是都是非必填 -->
    <div class="header flex item-center">
      <div class="left grow-1 flex justify-center items-center mt-1">
      </div>
      <div style="font-size:26px;" class="center text-center">川北幼儿师范高等专科学校舆情监控系统</div>
      <div class="right grow-1  flex justify-center items-center">
        <div class="left flex justify-center items-center">
          <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
          <!-- <i style="color: #fff;"  class="el-icon-monitor"></i> -->
          <!-- <img src="../../assets/imgs/window/xiaoxiicon.png" class="tq-icon-18" alt="" srcset=""> -->
          <!-- <span class="text-size-14 color1 font-bold ml-2">admin</span> -->
          <!-- <img src="../../assets/imgs/window/user.png" class="tq-icon ml-2" alt="" srcset=""> -->
        </div>
      </div>
    </div>
    <!-- 中间上面 -->
    <div class="conten w-100 h-conten flex">
      <div class="left conten-w--28">
        <div class="relative lefttop bc2">
          <div style="margin-top: -8px;" class="window-title window-title-t1 right-p-2">宣传报道</div>
          <Table :tableData="publicityData" :height="350" class="relative top-17"
            style="width: calc(100% - 60px);margin:auto;color:white;font-size:16px;" />
            <div v-if="!publicityData.length" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%);color: #02CAF2;">
              暂无数据
            </div>
        </div>
        <div class="relative leftbottom bc1">
          <div class="window-title window-title-t1" style="margin-top: -5px;">媒体统计</div>
          <div class="relative top-17" style="height:calc(100% - 130px);width: calc(100% - 80px);margin:auto;">
            <div v-for="(item,index) in tab" :key="index"
              class="w--33 inline-flex justify-center items-center mt-5 mb-5"
              style="margin-top: 0;height:50%;flex-direction: column;align-items: center;">
              <div class="bc-ic"
                style="width:calc(100% - 40px);height:calc(100% - 20px);display: flex;flex-direction: column;justify-content: center;align-items: center;">
                <img style="width:35px;height:35px;margin-bottom:10px" :src="item.icon" alt="">
                <div style="font-size: 24px;font-family: PangMenZhengDao;font-weight: 400;color: #3AFFE4;">
                  <CountRoll :startVal="0" :endVal="item.value" :separator="''" />
                </div>
              </div>
              <div style="color: #FFFFFF;font-size:18px;margin-top:10px;">{{item.tips}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="center conten-w--47">
        <div class="relative centertop bc3">
          <!-- 第一排 -->
          <!-- <div class="w-100 h-20 flex justify-evenly absolute top-15">
            <div class="w--25 h-20 left-center-top flex item-center">
              <img class="w-10 h-10 mr-5" src="../../assets/imgs/window/yuqingicon.png" alt="">
              <div class="flex flex-direction">
                <p style="font-size: 18px;color:#02D9FD;margin-bottom:10px;">全县舆情总数</p>
                <p style="font-size: 30px;color:white">
                  <CountRoll :startVal="0" :endVal="60" :separator="''" /><span
                    style="font-size: 12px;color:white;margin-left:10px">条</span>
                </p>
              </div>
            </div>
            <div class="w--25 h-20 left-center-top flex item-center">
              <img class="w-10 h-10 mr-5" src="../../assets/imgs/window/yuqingicon.png" alt="">
              <div class="flex flex-direction">
                <p style="font-size: 18px;color:#02D9FD;margin-bottom:10px;">负面信息总数</p>
                <p style="font-size: 30px;color:white">
                  <CountRoll :startVal="0" :endVal="24" :separator="''" /><span
                    style="font-size: 12px;color:white;margin-left:10px">条</span>
                </p>
              </div>
            </div>
          </div> -->

          <div class="tipBox">
             <img style="width:30px;margin-top: -10px;margin-right: 10px;" src="../../assets/imgs/window/yuqingicon.png" alt="">
             <div style="font-size: 18px;color:#02D9FD;margin-bottom:10px;">全国舆情总数 <span style="font-size: 20px;color:#fff">{{publicTotal}}</span> 条</div>
          </div>

          <!-- 地图数据 -->
           <div id="map" class="map-box" ref="projectMap">
          </div>
        </div>
        <div class="centerbottom flex">
          <div class="relative centerbottom-left bc4">
            <div class="window-title window-title-t2 left-p-5" style="margin-top:-6px;">近7日处理舆情统计</div>
            <div style="width: calc(100% - 68px);height: calc(100% - 68px); margin: 40px auto auto;">
              <!-- 七日数据 -->
              <!-- <ChartBarPic :chartObj="chartData" :showLegend="false"/> -->
              <div class="echart" id="chart" :style="myChartStyle"></div>
            </div>
          </div>

        </div>
      </div>
      <div class="right conten-w--25">
        <div class="relative righttop bc6">
          <div class="window-title window-title-t1" style="margin-top: -3px;">舆情预警</div>
          <Table :tableData="warningData" :height="350" class="relative top-17"
            style="width: calc(100% - 60px);margin:auto;color:white;font-size:16px;" />
            <div v-if="!warningData.length" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%);color: #02CAF2;">
              暂无数据
            </div>
        </div>
        <div class="relative rightcenter bc7">
          <div style="margin-top:3px;" class="window-title window-title-t1">近期特别关注</div>
          <Table :tableData="specialData" :height="195" class="relative top-17"
            style="width: calc(100% - 60px);margin:auto;color:white;font-size:16px;" />
          <div v-if="!specialData.length" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%);color: #02CAF2;">
            暂无数据
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import {
    getPublicsentimentAll,
    getPublicsentSource,
    get7DaysStatistics,
    getStatistics,
    getSourceStatistics
  } from "@/api/home/home";
  import IMG1 from '../../assets/imgs/window/icon1.png'
  import IMG2 from '../../assets/imgs/window/icon2.png'
  import IMG3 from '../../assets/imgs/window/icon3.png'
  import IMG4 from '../../assets/imgs/window/icon4.png'
  import IMG5 from '../../assets/imgs/window/icon5.png'
  import IMG6 from '../../assets/imgs/window/icon6.png'
  import IMG7 from '../../assets/imgs/window/icon7.png'
  import IMG8 from '../../assets/imgs/window/icon8.png'
  import IMG9 from '../../assets/imgs/window/icon1.png'
  // import IMG3 from '../../assets/imgs/window/hsicon.png'
  // import IMG3 from '../../assets/imgs/window/hsicon.png'
  import IMG11 from '../../assets/imgs/window/11.png'
  import IMG12 from '../../assets/imgs/window/12.png'
  import IMG13 from '../../assets/imgs/window/13.png'
  import IMG14 from '../../assets/imgs/window/14.png'
  import IMG15 from '../../assets/imgs/window/15.png'
  import IMG16 from '../../assets/imgs/window/16.png'
  import CountRoll from '../../components/countRoll.vue'
  import Table from '../../components/tables.vue'

  import cqmap from '../../components/china.js'
  import * as echarts from 'echarts';
  export default {
    components: {
      CountRoll,
      Table
    },
    dicts: ['ps_possession', 'ps_message', 'ps_category', 'ps_grade', 'ps_industry', 'ps_tendentiousness', 'ps_media'],
    data() {
      return {
        shxNum:0, // 陕西
        hnNum:0, // 湖南
        gdNum:0,
        gxNum:0,
        hainNum:0, // 海南
        cqNum:0,
        gzNum:0,
        ynNum:0,
        xzNum:0,
        hbNum:0,
        gsNum:0,
        qhNum:0,
        lxNum:0,
        xjNum:0,
        xgNum:0,
        amNum:0,
        twNum:0,
        shNum:0,
        bjNum:0,
        tjNum:0,
        hebNum:0, // 河北
        sxNum:0,
        nmgNum:0,
        lnNum:0,
        jnNum:0,
        hljNum:0,
        scNum:0,
        jsNum:0,
        zjNum:0,
        ahNum:0,
        fjNum:0,
        jxNum:0,
        sdNum:0,
        henNum:0,
        xData:['2022-11-1','2022-10-11','2022-11-1','2022-10-11','2022-11-1','2022-10-11','2022-11-10'],
        selfManagementData:[15,20,18,19,50,20,9],
        myChartStyle: {
          width: "110%",
          height: "120%",
          marginLeft: '-30px',
          marginTop:'-10px'
        },
        publicTotal:0,
        publicityData:[],
        warningData:[],
        specialData:[],
        tableDatatotal: 0,
        tableData: [],
        IMG1,
        IMG2,
        tab: [{
            icon: IMG12,
            // tips: '微博',
            value: 0
          },
          {
            icon: IMG3,
            // tips: '微信公众号',
            value: 0
          },
          {
            icon: IMG4,
            // tips: '火山小视频',
            value: 0
          },
          {
            icon: IMG5,
            // tips: '头条',
            value: 0
          },
          {
            icon: IMG7,
            // tips: '快手',
            value: 0
          },
        ],
        chartData: [{
            value: 60,
            values: 70,
            name: '访问',
            xdata: '1.1'
          },
          {
            value: 30,
            values: 40,
            name: '咨询',
            xdata: '1.2'
          },
          {
            value: 10,
            values: 30,
            name: '订单',
            xdata: '1.3'
          },
          {
            value: 30,
            values: 70,
            name: '点击',
            xdata: '1.4'
          },
          {
            value: 50,
            values: 80,
            name: '展现',
            xdata: '1.5'
          }
        ],
        leftMapData: [{
            id: 1,
            value: 1233,
            name: "视频",
            unit: "条",
            icon: IMG11
          },
          {
            id: 2,
            value: 13,
            name: "微博",
            unit: "条",
            icon: IMG12
          },
          {
            id: 3,
            value: 531,
            name: "微信公众号",
            unit: "条",
            icon: IMG13
          },
        ],
        rightMapData: [{
            id: 1,
            value: 421,
            name: "论坛",
            unit: "条",
            icon: IMG14
          },
          {
            id: 2,
            value: 23,
            name: "网络理政",
            unit: "条",
            icon: IMG15
          },
          {
            id: 3,
            value: 4321,
            name: "重点网站",
            unit: "条",
            icon: IMG16
          },
        ],
      };
    },
    mounted() {
      this.getPublicsentimentAll()
      // this.mapInit()
      //属地数据
      this.getPublicsentSource()
      this.get7DaysStatistics()
      // getSourceStatistics().then(res=>{
      //   console.log(res,'---------');
      // })
    },
    methods: {
      gotoPath(){
        let newpage = this.$router.resolve({
            path: '/window',
        })
        window.open(newpage.href, '_blank');
      },
      getPublicsentimentAll(){
        this.publicityData = [] //宣传报道
        this.warningData = [] //舆情预警
        this.specialData = [] //特别关注
        getPublicsentimentAll().then(res=>{
          let wxArr = []
          let wbArr = []
          let dyArr = []
          let ttArr = []
          res.map(item=>{
            if(item.tendentiousness == 1){
              this.publicityData.push(item)
            }
            if(item.tendentiousness == 3){
              this.warningData.push(item)
            }
            if(item.isAttention && item.isAttention  == 1){
              this.specialData.push(item)
            }

            //微博
            if(item.mediaType == 3){
              wbArr.push(item)
              this.tab[0].value = wbArr.length
            }
            //微信
            if(item.mediaType == 4){
              wxArr.push(item)
              this.tab[1].value = wxArr.length
            }
            //抖音
            if(item.mediaType == 8){
              dyArr.push(item)
              this.tab[2].value = dyArr.length
            }

            if(item.mediaType == 1){
              ttArr.push(item)
              this.tab[3].value = ttArr.length
            }

          })
        })
      },
      get7DaysStatistics(){
        get7DaysStatistics().then(res=>{
          res.data = res.data.reverse()
          this.xData = []
          this.selfManagementData = []
          res.data.map(item=>{
            item.days = item.days.slice(0,10)
            this.xData.push(item.days)
            this.selfManagementData.push(item.count)
          })
          this.initEcharts()
        })
      },
      //地图数据
      getPublicsentSource(){
        getPublicsentSource().then(res=>{
          this.publicTotal = 0
          if(res.data.length){
            res.data = res.data.filter(item=>{
              return item.releaseArea !=null
            })
            res.data.map(item=>{
              this.publicTotal += item.total
              this.dict.type.ps_possession.map(i=>{
                if(i.value == item.releaseArea){
                  item.name = i.label
                }
              })
            })
            console.log(res.data,'shuju ');
            res.data.map(item=>{
              if(item.name == '陕西'){
                this.shxNum = item.total
              }
              if(item.name == '湖南'){
                this.hnNum = item.total
              }
              if(item.name == '广东'){
                this.gdNum = item.total
              }
              if(item.name == '广西'){
                this.gxNum = item.total
              }
              if(item.name == '海南'){
                this.hainNum = item.total
              }
              if(item.name == '重庆'){
                this.cqNum = item.total
              }
              if(item.name == '贵州'){
                this.gzNum = item.total
              }
              if(item.name == '云南'){
                this.ynNum = item.total
              }
              if(item.name == '西藏'){
                this.xzNum = item.total
              }
              if(item.name == '湖北'){
                this.hbNum = item.total
              }
              if(item.name == '甘肃'){
                this.gsNum = item.total
              }
              if(item.name == '青海'){
                this.qhNum = item.total
              }
              if(item.name == '宁夏'){
                this.lxNum = item.total
              }
              if(item.name == '新疆'){
                this.xjNum = item.total
              }
              if(item.name == '香港'){
                this.xgNum = item.total
              }
              if(item.name == '澳门'){
                this.amNum = item.total
              }
              if(item.name == '台湾'){
                this.twNum = item.total
              }
              if(item.name == '上海'){
                this.shNum = item.total
              }
              if(item.name == '北京'){
                this.bjNum = item.total
              }
              if(item.name == '天津'){
                this.tjNum = item.total
              }
              if(item.name == '河北'){
                this.hebNum = item.total
              }
              if(item.name == '山西'){
                this.sxNum = item.total
              }
              if(item.name == '内蒙古'){
                this.nmgNum = item.total
              }
              if(item.name == '辽宁'){
                this.lnNum = item.total
              }
              if(item.name == '吉林'){
                this.jnNum = item.total
              }
              if(item.name == '黑龙江'){
                this.hljNum = item.total
              }
              if(item.name == '四川'){
                this.scNum = item.total
              }
              if(item.name == '江苏'){
                this.jsNum = item.total
              }
              if(item.name == '安徽'){
                this.ahNum = item.total
              }
              if(item.name == '福建'){
                this.fjNum = item.total
              }
              if(item.name == '江西'){
                this.jxNum = item.total
              }
              if(item.name == '山东'){
                this.sdNum = item.total
              }
              if(item.name == '河南'){
                this.henNum = item.total
              }
            })
            this.mapInit()
          }
        })
      },
      // 七日数据柱状图
      initEcharts() {
        // 多列柱状图
        const mulColumnZZTData = {
          color: '#E6F7FF',
          xAxis: {
            data: this.xData,
            axisLabel: { //x轴文字的配置
              textStyle: {
                color: "#fff",
              },
              interval: 0,
              rotate: 0 //设置倾斜度
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 0,
                type: "dashed"
              }
            }
          },
          // 图例
          legend: {
            data: [],
            top: "0%",
            left: "25%",
            itemWidth: 15,
            textStyle: {
              color: '#fff',
              padding: [0, 0, 0, 3], // 修改文字和图标距离
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          yAxis: {
            axisLabel: { //y轴文字的配置
              textStyle: {
                color: "#fff",
              }
            },
            min: 0,
            axisLine: { //y轴线的颜色以及宽度
              show: false,
              lineStyle: {
                color: "rgba(219,225,255,1)",
                width: 0,
                type: "dashed"
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(219,225,255,0.7)",
                type: 'dashed'
              }
            },
          },
          series: [{
              type: "bar", //形状为柱状图
              data: this.selfManagementData,
              barWidth:30, //柱图宽度
              name: "舆情数", // legend属性
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: {
                      //数值样式
                      color: '#fff',
                      fontSize: 12,
                    },
                  },
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 1,
                    color: 'rgba(3, 214, 253, .7)'
                  }, {
                    offset: 1,
                    color: 'rgba(50, 254, 234, 0)'
                  }]),
                }
              },
            }
          ],
        };
        const myChart = echarts.init(document.getElementById("chart"));
        setTimeout(() => {
          myChart.setOption(mulColumnZZTData);
        }, 700)
      },
      mapInit() {
        echarts.registerMap("CQ", cqmap);
        var geoCoordMap = {
          //这里是需要显示在地图上面的模板-对应固定的 动了不会显示地图
          上海: [121.4648, 31.2891],
          东莞: [113.8953, 22.901],
          东营: [118.7073, 37.5513],
          中山: [113.4229, 22.478],
          临汾: [111.4783, 36.1615],
          临沂: [118.3118, 35.2936],
          丹东: [124.541, 40.4242],
          丽水: [119.5642, 28.1854],
          新疆: [84.9236, 41.8883],
          佛山: [112.8955, 23.1097],
          保定: [115.0488, 39.0948],
          甘肃: [103.5901, 36.3043],
          包头: [110.3467, 41.4899],
          北京: [116.4551, 40.2539],
          北海: [109.314, 21.6211],
          江苏: [118.8062, 31.9208],
          广西: [108.479, 23.1152],
          江西: [116.0046, 28.6633],
          南通: [121.1023, 32.1625],
          厦门: [118.1689, 24.6478],
          台州: [121.1353, 28.6688],
          安徽: [117.29, 32.0581],
          内蒙古: [110.4624, 41.5141],
          咸阳: [108.4131, 34.8706],
          黑龙江: [127.9688, 45.368],
          唐山: [118.4766, 39.6826],
          嘉兴: [120.9155, 30.6354],
          大同: [113.7854, 39.8035],
          大连: [122.2229, 39.4409],
          天津: [117.4219, 39.4189],
          山西: [112.3352, 37.9413],
          威海: [121.9482, 37.1393],
          宁波: [121.5967, 29.6466],
          宝鸡: [107.1826, 34.3433],
          宿迁: [118.5535, 33.7775],
          常州: [119.4543, 31.5582],
          广东: [113.5107, 23.2196],
          廊坊: [116.521, 39.0509],
          延安: [109.1052, 36.4252],
          张家口: [115.1477, 40.8527],
          徐州: [117.5208, 34.3268],
          德州: [116.6858, 37.2107],
          惠州: [114.6204, 23.1647],
          四川: [103.9526, 30.7617],
          扬州: [119.4653, 32.8162],
          承德: [117.5757, 41.4075],
          西藏: [91.1865, 30.1465],
          无锡: [120.3442, 31.5527],
          日照: [119.2786, 35.5023],
          云南: [102.9199, 25.4663],
          浙江: [119.5313, 29.8773],
          枣庄: [117.323, 34.8926],
          柳州: [109.3799, 24.9774],
          株洲: [113.5327, 27.0319],
          湖北: [114.3896, 30.6628],
          汕头: [117.1692, 23.3405],
          江门: [112.6318, 22.1484],
          辽宁: [123.1238, 42.1216],
          沧州: [116.8286, 38.2104],
          河源: [114.917, 23.9722],
          泉州: [118.3228, 25.1147],
          泰安: [117.0264, 36.0516],
          泰州: [120.0586, 32.5525],
          山东: [117.1582, 36.8701],
          济宁: [116.8286, 35.3375],
          海口: [110.3893, 19.8516],
          淄博: [118.0371, 36.6064],
          淮安: [118.927, 33.4039],
          深圳: [114.5435, 22.5439],
          清远: [112.9175, 24.3292],
          温州: [120.498, 27.8119],
          渭南: [109.7864, 35.0299],
          湖州: [119.8608, 30.7782],
          湘潭: [112.5439, 27.7075],
          滨州: [117.8174, 37.4963],
          潍坊: [119.0918, 36.524],
          烟台: [120.7397, 37.5128],
          玉溪: [101.9312, 23.8898],
          珠海: [113.7305, 22.1155],
          盐城: [120.2234, 33.5577],
          盘锦: [121.9482, 41.0449],
          河北: [114.4995, 38.1006],
          福州: [119.4543, 25.9222],
          秦皇岛: [119.2126, 40.0232],
          绍兴: [120.564, 29.7565],
          聊城: [115.9167, 36.4032],
          肇庆: [112.1265, 23.5822],
          舟山: [122.2559, 30.2234],
          苏州: [120.6519, 31.3989],
          莱芜: [117.6526, 36.2714],
          菏泽: [115.6201, 35.2057],
          营口: [122.4316, 40.4297],
          葫芦岛: [120.1575, 40.578],
          衡水: [115.8838, 37.7161],
          衢州: [118.6853, 28.8666],
          西宁: [101.4038, 36.8207],
          陕西: [109.1162, 34.2004],
          贵州: [106.6992, 26.7682],
          连云港: [119.1248, 34.552],
          邢台: [114.8071, 37.2821],
          邯郸: [114.4775, 36.535],
          郑州: [113.4668, 34.6234],
          鄂尔多斯: [108.9734, 39.2487],
          重庆: [107.7539, 30.1904],
          金华: [120.0037, 29.1028],
          铜川: [109.0393, 35.1947],
          宁夏: [106.3586, 38.1775],
          镇江: [119.4763, 31.9702],
          长春: [125.8154, 44.2584],
          湖南: [113.0823, 28.2568],
          长治: [112.8625, 36.4746],
          阳泉: [113.4778, 38.0951],
          青岛: [120.4651, 36.3373],
          韶关: [113.7964, 24.7028],
          吉林: [125.40, 42.31],
          海南: [108.37, 18.20],
          青海: [101.778916, 36.623178],
          香港: [114.10000, 22.20000],
          澳门: [113.50000, 22.20000],
          台湾: [121.520076, 25.030724],
          福建: [115.40, 23.30],
          河南: [110.21, 31.23],

        };
        var BJData = [
          [{
              name: "陕西",
            },
            {
              name: "陕西",
              value: this.sxNum,
            },
          ],
          [{
              name: "湖南",
            },
            {
              name: "湖南",
              value: this.hnNum,
            },
          ],
          [{
              name: "广西",
            },
            {
              name: "广西",
              value: this.gxNum,
            },
          ],
          [{
              name: "天津",
            },
            {
              name: "天津",
              value: this.tjNum,
            },
          ],
          [{
              name: "贵州",
            },
            {
              name: "贵州",
              value: this.gzNum,
            },
          ],
            [{
              name: "内蒙古",
            },
            {
              name: "内蒙古",
              value: this.nmgNum,
            },
          ],
          [{
              name: "河北",
            },
            {
              name: "河北",
              value: this.hbNum,
            },
          ],
          [{
              name: "山西",
            },
            {
              name: "山西",
              value: this.sxNum,
            },
          ],
          [{
              name: "新疆",
            },
            {
              name: "新疆",
              value: this.xjNum,
            },
          ],
          [{
              name: "辽宁",
            },
            {
              name: "辽宁",
              value: this.lnNum,
            },
          ],
          [{
              name: "吉林",
            },
            {
              name: "吉林",
              value: this.jnNum,
            },
          ],
          [{
              name: "黑龙江",
            },
            {
              name: "黑龙江",
              value: this.hljNum,
            },
          ],
          [{
              name: "西藏",
            },
            {
              name: "西藏",
              value: this.xzNum,
            },
          ],
          [{
              name: "甘肃",
            },
            {
              name: "甘肃",
              value: this.gsNum,
            },
          ],
          [{
              name: "黑龙江",
            },
            {
              name: "黑龙江",
              value: this.hljNum,
            },
          ],
          [{
              name: "云南",
            },
            {
              name: "云南",
              value: this.ynNum,
            },
          ],
          [{
              name: "西藏",
            },
            {
              name: "西藏",
              value: this.xzNum,
            },
          ],
          [{
              name: "湖北",
            },
            {
              name: "湖北",
              value: this.hbNum,
            },
          ],
          [{
              name: "甘肃",
            },
            {
              name: "甘肃",
              value: this.gsNum,
            },
          ],
          [{
              name: "青海",
            },
            {
              name: "青海",
              value: this.qhNum,
            },
          ],
          [{
              name: "宁夏",
            },
            {
              name: "宁夏",
              value: this.lxNum,
            },
          ],
          [{
              name: "新疆",
            },
            {
              name: "新疆",
              value: this.xjNum,
            },
          ],
          [{
              name: "安徽",
            },
            {
              name: "安徽",
              value: this.ahNum,
            },
          ],
          [{
              name: "江西",
            },
            {
              name: "江西",
              value: this.jxNum,
            },
          ],
          [{
              name: "山东",
            },
            {
              name: "山东",
              value: this.sdNum,
            },
          ],
          [{
              name: "河南",
            },
            {
              name: "河南",
              value: this.henNum,
            },
          ],
          [{
              name: "台湾",
            },
            {
              name: "台湾",
              value: this.twNum,
            },
          ],
        ];
        var SHData = [
          [{
            name: "浙江",
          },
            {
              name: "浙江",
              value: this.zjNum,
            },
          ],
          [{
            name: "福建",
          },
            {
              name: "福建",
              value: this.fjNum,
            },
          ],
          [{
            name: "海南",
          },
            {
              name: "海南",
              value: this.hnNum,
            },
          ],
          [{
            name: "香港",
          },
            {
              name: "香港",
              value: this.xgNum,
            },
          ],
          [{
            name: "澳门",
          },
            {
              name: "澳门",
              value: this.amNum,
            },
          ],
          [{
            name: "重庆",
          },
            {
              name: "重庆",
              value: this.cqNum,
            },
          ],
          [{
            name: "广东",
          },
            {
              name: "广东",
              value: this.gdNum,
            },
          ],
          [{
              name: "四川",
            },
            {
              name: "四川",
              value: this.scNum,
            },
          ],
          [{
              name: "江苏",
            },
            {
              name: "江苏",
              value: this.jsNum,
            },
          ],
          [{
              name: "北京",
            },
            {
              name: "北京",
              value: this.bjNum,
            },
          ],
          [{
              name: "重庆",
            },
            {
              name: "重庆",
              value: this.cqNum,
            },
          ],
          [{
              name: "上海",
            },
            {
              name: "上海",
              value: this.shNum,
            },
          ],
          [{
              name: "陕西",
            },
            {
              name: "陕西",
              value: this.sxNum,
            },
          ],
          [{
              name: "江苏",
            },
            {
              name: "江苏",
              value: this.jsNum,
            },
          ],
        ];
        var GZData = [];
        var planePath =
          "path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705";
        var color = ["#ffa022", "#f00", "#a6c84cs"];
        var series = [];
        //这里是发散的中心店，这里有三个
        [
          ["新乡", BJData],
          ["九江", SHData],
          ["新疆", GZData],
        ].forEach(function(item, i) {
          series.push({
            //控制浮动点
            name: item[0] + "开始",
            type: "lines",
            zlevel: 1,
            effect: {
              //导线绘制
              show: true,
              period: 6,
              trailLength: 0.7,
              color: "#fff",
              symbolSize: 3,
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 0,
                curveness: 0.2,
              },
            },
            // data: convertData(item[1]),
          }, {
            name: item[0] + "始发：", //鼠标移到线条上显示出的数据 + 数据格式：JSON.stringify(item[1][3][1].value)
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: planePath, //这个是路径特写改编
              symbolSize: 15,
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 1,
                opacity: 0.4,
                curveness: 0.2,
              },
            },
            // data: convertData(item[1]),
          }, {
            //用来显示点到点
            name: item[0] + "",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              normal: {
                show: true,
                position: "right",
                // formatter: '{b}' //改变显示在地图上的点名字
                formatter: function(item) {
                  return item.name;
                },
              },
            },
            symbolSize: function(val) {
              return val[2] / 4;
            },
            itemStyle: {
              normal: {
                color: color[i],
              },
            },
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat([
                  dataItem[1].value,
                ]), //值的大小决定圆圈大小
              };
            }),
          });
        });
        var option = {
          backgroundColor: "rgba(1,1,1,0)",
          title: {
            left: "left",
            textStyle: {
              color: "#fff",
            },
          },
          tooltip: {
            // trigger: 'item'
            // 鼠标移到图里面的浮动提示框
            // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
            formatter(params, ticket, callback) {
              // params.data 就是series配置项中的data数据遍历
              let localValue, perf, downloadSpeep, usability, point;
              if (params.data) {
                localValue = params.data.value;
                perf = params.data.perf;
                downloadSpeep = params.data.downloadSpeep;
                usability = params.data.usability;
                point = params.data.point;
              } else {
                // 为了防止没有定义数据的时候报错写的
                localValue = 0;
                perf = 0;
              }
              let htmlStr = `
                <div style='font-size:18px;'> ${params.name}</div>
                <p style='text-align:left;margin-top:-4px;'>
                    舆情数量：${localValue[2]}<br/>
                </p>
              `;
              return htmlStr;
            },
          },
          legend: {
            orient: "vertical",
            top: "bottom",
            left: "right",
            data: ["北京", "上海 Top10", "广州 Top10"],
            textStyle: {
              color: "#fff",
            },
            selectedMode: "single",
          },
          geo: {
            map: "china",
            roam: true, //是否在中心点显示文字
            zoom: 1.2,
            label: {
              show: true, //是否显示地图上方的省的名字
              color: "#F1F3F4",
              fontSize: 12, //显示字体的大小
              fontWeight: 400,
              emphasis: {
                //鼠标移上去会显示省份文字-如果设置显示在地图上的而非弹出浮层上
                show: false,
              },
            },
            roam: false, //鼠标滚动事件 true 滚动可缩小放大
            itemStyle: {
              normal: {
                //  "areaColor": "#053f98",//地图区域颜色
                areaColor: "#142957", //原色
                borderColor: "#0692a4",
              },
              emphasis: {
                areaColor: "#2776E4",
              },
            },
          },
          series: series,
        };
        var echarts_dom = this.$refs.projectMap;
        let myChart = echarts.init(echarts_dom);
        this.timer = setTimeout(() => {
          myChart.setOption(option);
        }, 1);
      },
    }
  };
</script>

<style lang="scss" scoped>
  .white {
    color: white
  }

  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .border-test {
    box-shadow: inset 0px 0px 10px red;
  }

  .ft18 {
    font-size: 18px;
  }

  .h-9 {
    height: 36px;
  }

  .h-20 {
    height: 80px;
  }

  .h-26 {
    height: 104px;
  }

  .flex {
    display: flex;
  }

  .inline-flex {
    display: inline-flex;
  }

  .item-center {
    align-items: center;
  }

  .grow-1 {
    flex-grow: 1;
  }

  .top-12 {
    top: 60px
  }

  .top-15 {
    top: 60px
  }

  .top-17 {
    top: 68px;
  }

  .top-21 {
    top: 84px;
  }

  .top-23 {
    top: 92px;
  }

  .top-25 {
    top: 100px;
  }

  .right-p-2 {
    right: 2% !important;
  }

  .left-p-5 {
    left: 5% !important;
  }

  .mt-1 {
    margin-top: 4px;
  }

  .mt-5 {
    margin-top: 20px;
  }

  .ml-2 {
    margin-left: 8px;
  }

  .ml-3 {
    margin-left: 12px;
  }

  .ml-4 {
    margin-left: 16px;
  }

  .ml-5 {
    margin-left: 20px;
  }

  .mr-5 {
    margin-right: 20px;
  }

  .mb-5 {
    margin-bottom: 20px;
  }

  .w-10 {
    width: 40px;
  }

  .w-12-5 {
    width: 50px;
  }

  .h-10 {
    height: 40px;
  }

  .h-12-5 {
    height: 50px;
  }

  .w-100 {
    width: 100%
  }

  .w--25 {
    width: 25%;
  }

  .w--28 {
    width: 28%;
  }

  .w--33 {
    width: 33%;
  }

  .w--42 {
    width: 42%;
  }

  .w--50 {
    width: 50%;
  }

  .h-100 {
    height: 100%;
  }

  .flex-direction {
    flex-direction: column;
  }

  .text-center {
    text-align: center;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-evenly {
    justify-content: space-evenly;
  }

  .items-center {
    align-items: center;
  }

  .text-size-14 {
    font-size: 14px;
  }

  .color1 {
    color: #FDFDFD80
  }

  .font-bold {
    font-weight: bold;
  }

  .window-title {
    font-size: 18px;
    line-height: 18px;
    font-family: PingFang;
    font-weight: 800;
    color: #02D9FD;

    position: absolute;
    left: 0px;
    right: 0;
    margin: auto;
    text-align: center;

    &-t1 {
      top: 18px;
    }

    &-t2 {
      top: 14px;
    }
  }

  .window>#app {}

  .window {
    width: calc(100%);
    height: 100%;
    margin: auto;
    background-color: #000A3B;
    overflow: hidden;
    position:relative;
    .header {
      height: 90px;
      width: 100%;
      background-image: url('../../assets/imgs/window/topbg.png');
      background-size: 100%;
      background-repeat: no-repeat;

      .left {

        .center {
          color: white;

          .addr {
            font-size: 16px;

            span {
              font-size: 12px;
            }
          }

          .tem {
            font-size: 12px;
          }
        }
      }

      .center {
        font-size: 32px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #01C4F7;
        width: 38%;
      }
    }
  }

  .tq-icon {
    width: 33px;
  }

  .tq-icon-18 {
    width: 18px;
  }

  .h-conten {
    height: calc(100% - 90px);
  }

  .conten {
    .center {
      height: calc(100%);
    }

    .lefttop {
      height: calc(60%);
    }

    .leftbottom {
      height: calc(40%);
    }

    .righttop {
      height: calc(60%);
    }

    .rightcenter {
      height: calc(40%);
    }

    .rightbottom {
      height: calc(20%);
    }

    .centertop {
      height: calc(65%);
      margin: auto 15px;
    }

    .centerbottom {
      height: calc(35%);

      &-left {
        // width: calc(60%);
        width: calc(100%);
      }

      &-right {
        width: calc(40% - 0px);
      }
    }

    &-w--25 {
      width: calc(25%);
    }

    &-w--28 {
      width: calc(28%);
    }

    &-w--47 {
      width: calc(47% - 0px);
    }

    &-w--50 {
      width: calc(50% - 0px);
    }
  }

  .bc1,
  .bc2,
  .bc3,
  .bc4,
  .bc5,
  .bc6,
  .bc7,
  .bc8 {
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .bc1 {
    background-image: url('../../assets/imgs/window/k1.png');
  }

  .bc2 {
    background-image: url('../../assets/imgs/window/k2.png');
  }

  .bc3 {
    background-image: url('../../assets/imgs/window/k3.png');
  }

  .bc4 {
    background-image: url('../../assets/imgs/window/k4.png');
  }

  .bc5 {
    background-image: url('../../assets/imgs/window/k5.png');
  }

  .bc6 {
    background-image: url('../../assets/imgs/window/k6.png');
  }

  .bc7 {
    background-image: url('../../assets/imgs/window/k7.png');
    background-size: 100% 100%;
  }

  .bc8 {
    background-image: url('../../assets/imgs/window/k8.png');
    background-size: 100% 100%;
  }

  .bc-ic {
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url('../../assets/imgs/window/iconbg.png');
  }

  .centerimgc {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

    &-1 {
      animation: mymove 55s infinite;
      animation-timing-function: linear;
    }

    &-2 {
      animation: mymove 55s infinite;
      animation-timing-function: linear;
      animation-direction: reverse;
    }
  }

  @keyframes mymove {
    100% {
      transform: rotate(360deg);
    }
  }

  // .tabrow{
  // 	background-color: #000A3B;
  // 	td{
  // 		background-color: #0B1547;
  // 	}
  // 	.el-table__cell{
  // 		background-color:#000A3B!important;
  // 	}
  // }
  // .el-table tr{background-color: #000A3B;line-height: 30px;}
  // .el-table .el-table__cell{
  // 	background-color: #0B1547;
  // }
  // .el-table td.el-table__cell div{line-height: 30px;}
  // #app .el-table th{background-color:#021950;color: #02D9FD;}
  // .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{border-bottom: 1px solid #ebeef500;}
  // .el-table__row:hover{background-color: transparent;}
  // .el-table tbody tr:hover>td{background-color: transparent !important;}
  // #app .el-table th{border-right: 1px solid #ccc0;}
  // .el-table .el-table__cell{padding:0}
  // .el-table__body{width:100% !important;}
  // .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell,.el-table, .el-table__expanded-cell{background-color: transparent;}
  // .el-table__body-wrapper::-webkit-scrollbar{
  // 	display: none;
  // }
  // .el-table--border::after, .el-table--group::after, .el-table::before{background-color: #ebeef500;}
  .cl {
    width: 63px;
    height: 22px;
    line-height: 22px !important;
    background: #2F9E19;
    border-radius: 10px;
    text-align: center;
  }

  .wcl {
    width: 63px;
    height: 22px;
    line-height: 22px !important;
    background: #CB1C1C;
    border-radius: 10px;
    text-align: center;
  }

  .map-left-top-left {
    position: absolute;
    height: calc(50% - 50px);
    display: flex;
    justify-content: space-between;
    bottom: 120px;
    left: 120px;
  }

  .map-left-top-right {
    position: absolute;
    height: calc(50% - 50px);
    display: flex;
    justify-content: space-between;
    bottom: 120px;
    right: 120px;
  }

  .map-box {
    width: calc(100% - 120px);
    height:90%;
    top:27px;
    position: relative;
    margin: auto;
  }

  .tipBox{
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 40px;
    left:50px;
  }
</style>
